/**
 * 使用受控的形式对表单数据进行收集
 */
import React, { Component } from "react";

//control 控制
export default class FormSimpleCom extends Component {
  //1. 声明状态
  state = {
    username: '',
    password: '',
    phone: ''
  }

  //声明事件回调
  submit = (e) => {
    //取消默认行为
    e.preventDefault();
    //控制台输出
    console.log(`用户名: ${this.state.username}  密码: ${this.state.password}`)
  }

  //表单重置的事件
  reset = (e) => {
    //取消默认行为
    e.preventDefault();
    //清空表单元素的值
    this.setState({
      username: '',
      password: ''
    })
  }

  //表单元素 onChange 的事件回调
  save = (e) => {
    this.setState({
      [e.target.name]: e.target.value
    });
  }

  render() {
    return (
      // onSubmit 当表单提交的时候触发的一个事件
      <form onSubmit={this.submit}>
        <h2>登录😊</h2>
        <hr />
        {/* 2. 为 input 元素设置 value 属性, 值为状态的值 */}
        用户名: <input name="username" type="text" value={this.state.username} onChange={this.save} />
        <br></br>
        密码: <input name="password" type="password" value={this.state.password} onChange={this.save}  />
        <br />
        手机号: <input name="phone" type="text" value={this.state.phone} onChange={this.save}  />

        <hr />
        <button>登录</button>
        <button onClick={this.reset}>重置</button>
      </form>
    );
  }
}
